<template>
  <view class="container">
    <!-- 顶部导航栏 -->
    <header class="header">
      <div class="header-content">
        <div class="header-left">
          <div class="logo-container">
            <view class="logo-icon">
              <text class="fas fa-recycle"></text>
            </view>
            <text class="logo-text">绿色回收</text>
          </div>
        </div>
        <div class="header-right">
          <view class="header-icon-btn" @click="viewNotifications">
            <text class="fas fa-bell"></text>
          </view>
          <view class="header-icon-btn" @click="viewSettings">
            <text class="fas fa-cog"></text>
          </view>
        </div>
      </div>
    </header>

    <!-- 主内容区 -->
    <main class="main-content">
      <!-- 用户信息区域 -->
      <section class="user-info-section">
        <div class="user-info-card">
          <div class="user-info-content">
            <div class="avatar-container">
              <image 
                class="user-avatar"
                src="https://design.gemcoder.com/staticResource/echoAiSystemImages/1a7ab07a786a101307add5ba516579bd.png"
                mode="aspectFill"
              ></image>
              <view class="status-indicator"></view>
            </div>
            <div class="user-details">
              <div class="user-name-container">
                <text class="user-name">张小明</text>
                <text class="user-badge">环保达人</text>
              </div>
              <text class="user-stats">已累计回收 86.5kg 可回收物</text>
              <div class="user-stats-grid">
                <div class="stat-item">
                  <text class="stat-value money">128.50</text>
                  <text class="stat-label">可提现(元)</text>
                </div>
                <div class="stat-item">
                  <text class="stat-value points">12</text>
                  <text class="stat-label">环保积分</text>
                </div>
                <div class="stat-item">
                  <text class="stat-value count">48</text>
                  <text class="stat-label">投放次数</text>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <!-- 快捷操作区域 -->
      <section class="quick-actions-section">
        <div class="quick-actions-grid">
          <view class="quick-action-item" @click="goToCleanup">
            <view class="action-icon cleanup"><text class="fas fa-dumpster"></text></view>
            <text class="action-text">我的清运</text>
          </view>
          <view class="quick-action-item" @click="viewAchievements">
            <view class="action-icon achievements"><text class="fas fa-trophy"></text></view>
            <text class="action-text">环保成就</text>
          </view>
          <view class="quick-action-item" @click="viewRewards">
            <view class="action-icon rewards"><text class="fas fa-gift"></text></view>
            <text class="action-text">我的奖励</text>
          </view>
          <view class="quick-action-item" @click="viewProfile">
            <view class="action-icon profile"><text class="fas fa-id-card"></text></view>
            <text class="action-text">个人资料</text>
          </view>
        </div>
      </section>

      <!-- 功能菜单区域 -->
      <section class="feature-menu-section">
        <view class="menu-card">
          <text class="menu-title">系统设置</text>
          <view class="menu-list">
            <view class="menu-item" @click="viewAccountSecurity">
              <view class="menu-item-left">
                <view class="menu-icon"><text class="fas fa-user-circle"></text></view>
                <text class="menu-text">账号与安全</text>
              </view>
              <text class="menu-arrow">&gt;</text>
            </view>
            <view class="menu-item" @click="viewMessageSettings">
              <view class="menu-item-left">
                <view class="menu-icon"><text class="fas fa-bell"></text></view>
                <text class="menu-text">消息通知</text>
              </view>
              <text class="menu-arrow">&gt;</text>
            </view>
            <view class="menu-item" @click="viewHelpCenter">
              <view class="menu-item-left">
                <view class="menu-icon"><text class="fas fa-question-circle"></text></view>
                <text class="menu-text">帮助中心</text>
              </view>
              <text class="menu-arrow">&gt;</text>
            </view>
            <view class="menu-item" @click="viewAboutUs">
              <view class="menu-item-left">
                <view class="menu-icon"><text class="fas fa-file-alt"></text></view>
                <text class="menu-text">关于我们</text>
              </view>
              <text class="menu-arrow">&gt;</text>
            </view>
            <view class="menu-item" @click="viewWithdrawal">
              <view class="menu-item-left">
                <view class="menu-icon bg-light-orange"><text class="fas fa-chart-line"></text></view>
                <text class="menu-text">资金提现</text>
              </view>
              <text class="menu-arrow">&gt;</text>
            </view>
          </view>
          <view class="logout-button" @click="logout">
            <text class="fas fa-sign-out-alt"></text>
            <text class="logout-text">退出登录</text>
          </view>
        </view>
      </section>
    </main>


  </view>
</template>

<script>
export default {
  data() {
    return {
      title: '我的'
    }
  },
  onLoad() {
    // 页面加载时的初始化
  },
  methods: {
    // 查看通知
    viewNotifications() {
      uni.showToast({
        title: '查看通知功能开发中',
        icon: 'none'
      });
    },
    
    // 查看设置
    viewSettings() {
      uni.showToast({
        title: '设置功能开发中',
        icon: 'none'
      });
    },
    
    // 查看钱包
    viewWallet() {
      uni.showToast({
        title: '我的钱包功能开发中',
        icon: 'none'
      });
    },
    
    // 查看成就
    viewAchievements() {
      uni.showToast({
        title: '环保成就功能开发中',
        icon: 'none'
      });
    },
    
    // 查看奖励
    viewRewards() {
      // 跳转到奖励页面
      uni.navigateTo({
        url: '/pages/rewards/index'
      });
    },
    
    // 查看个人资料
    viewProfile() {
      uni.showToast({
        title: '个人资料功能开发中',
        icon: 'none'
      });
    },
    
    // 查看账号安全
    viewAccountSecurity() {
      uni.showToast({
        title: '账号与安全功能开发中',
        icon: 'none'
      });
    },
    
    // 查看消息设置
    viewMessageSettings() {
      uni.showToast({
        title: '消息通知功能开发中',
        icon: 'none'
      });
    },
    
    // 查看帮助中心
    viewHelpCenter() {
      uni.showToast({
        title: '帮助中心功能开发中',
        icon: 'none'
      });
    },
    
    // 查看关于我们
    viewAboutUs() {
      uni.showToast({
        title: '关于我们功能开发中',
        icon: 'none'
      });
    },
    
    // 查看资金提现
    viewWithdrawal() {
      uni.navigateTo({
        url: '/pages/withdrawal/index'
      });
    },
    
    // 清运管理
    goToCleanup() {
      uni.navigateTo({
        url: '/pages/cleanup/index'
      });
    },
    
    // 退出登录
    logout() {
      uni.showModal({
        title: '退出登录',
        content: '确定要退出登录吗？',
        success: (res) => {
          if (res.confirm) {
            // 执行退出登录操作
            console.log('用户确定退出登录');
          }
        }
      });
    },
    

  }
};
</script>

<style>
/* 全局样式重置 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  width: 100%;
  min-height: 100vh;
  background: linear-gradient(to bottom, #e5f7e9, #eaf1ee);
  padding-bottom: 120rpx; /* 为底部导航栏留出空间 */
}

/* 顶部导航栏 */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  z-index: 999;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24rpx 30rpx;
}

.header-left {
  display: flex;
  align-items: center;
}

.logo-container {
  display: flex;
  align-items: center;
}

.logo-icon {
  width: 40rpx;
  height: 40rpx;
  background-color: #165DFF;
  border-radius: 10rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 10rpx;
}

.logo-icon .fas {
  color: #fff;
  font-size: 24rpx;
}

.logo-text {
  font-size: 32rpx;
  font-weight: bold;
  color: #1D2129;
}

.header-right {
  display: flex;
  align-items: center;
}

.header-icon-btn {
  width: 40rpx;
  height: 40rpx;
  background-color: #E8F3FF;
  border-radius: 20rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 20rpx;
}

.header-icon-btn .fas {
  color: #165DFF;
  font-size: 24rpx;
}

/* 主内容区 */
.main-content {
  padding: 140rpx 30rpx 30rpx;
}

/* 用户信息区域 */
.user-info-section {
  margin-bottom: 30rpx;
}

.user-info-card {
  background-color: #fff;
  border-radius: 30rpx;
  padding: 30rpx;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  position: relative;
  overflow: hidden;
}

.user-info-card::after {
  content: '';
  position: absolute;
  top: -80rpx;
  right: -80rpx;
  width: 160rpx;
  height: 160rpx;
  background-color: rgba(22, 93, 255, 0.1);
  border-radius: 50%;
}

.user-info-content {
  display: flex;
  align-items: center;
  position: relative;
  z-index: 1;
}

.avatar-container {
  position: relative;
  margin-right: 30rpx;
}

.user-avatar {
  width: 160rpx;
  height: 160rpx;
  border-radius: 80rpx;
  border: 16rpx solid #fff;
}

.status-indicator {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 20rpx;
  height: 20rpx;
  background-color: #00B42A;
  border-radius: 10rpx;
  border: 4rpx solid #fff;
}

.user-details {
  flex: 1;
}

.user-name-container {
  display: flex;
  align-items: center;
  margin-bottom: 8rpx;
}

.user-name {
  font-size: 32rpx;
  font-weight: bold;
  color: #1D2129;
  margin-right: 10rpx;
}

.user-badge {
  font-size: 20rpx;
  color: #165DFF;
  background-color: rgba(22, 93, 255, 0.1);
  padding: 2rpx 10rpx;
  border-radius: 15rpx;
}

.user-stats {
  font-size: 24rpx;
  color: #86909C;
  margin-bottom: 20rpx;
}

.user-stats-grid {
  display: flex;
  justify-content: space-between;
}

.stat-item {
  text-align: center;
}

.stat-value {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 4rpx;
}

.stat-value.money {
  color: #165DFF;
}

.stat-value.points {
  color: #00B42A;
}

.stat-value.count {
  color: #FF7D00;
}

.stat-label {
  font-size: 20rpx;
  color: #86909C;
}

/* 快捷操作区域 */
.quick-actions-section {
  margin-bottom: 30rpx;
}

.quick-actions-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20rpx;
}

.quick-action-item {
  background-color: #fff;
  border-radius: 20rpx;
  padding: 20rpx 10rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}

.quick-action-item:active {
  transform: scale(0.98);
}

.action-icon {
  width: 48rpx;
  height: 48rpx;
  border-radius: 24rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10rpx;
}

.action-icon.cleanup {
  background-color: rgba(34, 139, 34, 0.1);
}

.action-icon.achievements {
  background-color: rgba(0, 180, 42, 0.1);
}

.action-icon.rewards {
  background-color: rgba(255, 125, 0, 0.1);
}

.action-icon.profile {
  background-color: rgba(147, 51, 234, 0.1);
}

.action-icon .fas {
  font-size: 28rpx;
}

.action-icon.cleanup .fas {
  color: #228B22;
}

.action-icon.achievements .fas {
  color: #00B42A;
}

.action-icon.rewards .fas {
  color: #FF7D00;
}

.action-icon.profile .fas {
  color: #9333EA;
}

.action-text {
  font-size: 24rpx;
  color: #1D2129;
  text-align: center;
}

/* 功能菜单区域 */
.feature-menu-section {
  margin-bottom: 30rpx;
}

.menu-card {
  background-color: #fff;
  border-radius: 20rpx;
  padding: 30rpx;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.menu-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #1D2129;
  margin-bottom: 30rpx;
}

.menu-list {
  margin-bottom: 20rpx;
}

.menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 25rpx 0;
  border-bottom: 1rpx solid #F2F3F5;
}

.menu-item:last-child {
  border-bottom: none;
}

.menu-item-left {
      display: flex;
      align-items: center;
    }

.menu-icon {
  width: 40rpx;
  height: 40rpx;
  background-color: #F2F3F5;
  border-radius: 20rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20rpx;
}

.menu-icon .fas {
  font-size: 24rpx;
  color: #86909C;
}

.menu-icon.bg-light-orange {
  background-color: rgba(255, 125, 0, 0.1);
}

.menu-icon.bg-light-orange .fas {
  color: #FF7D00;
}

.menu-text {
  font-size: 28rpx;
  color: #1D2129;
}

.menu-arrow {
  font-size: 24rpx;
  color: #86909C;
}

.logout-button {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 25rpx 0;
  margin-top: 10rpx;
  border: 1rpx solid rgba(245, 63, 63, 0.3);
  border-radius: 15rpx;
  color: #F53F3F;
  font-size: 28rpx;
  transition: all 0.3s ease;
}

.logout-button:active {
  background-color: rgba(245, 63, 63, 0.05);
}

.logout-button .fas {
  margin-right: 10rpx;
  font-size: 24rpx;
}

.logout-text {
  font-weight: 500;
}


</style>